<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--店员修改-->
      <div class="common-form">配送员编辑</div>
      <el-form-item label="姓名" prop="nickName">
        <el-input class="max-w460" v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input class="max-w460" v-model="form.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
import DeliveryApi from '@/api/delivery.js';
import Upload from '@/components/file/Upload';
import {
  formatModel
} from '@/utils/base.js'

export default {
  components: {
    /*上传组件*/
    Upload,
  },
  data() {
    return {
      form: {
        id: '',
        phone: '',
        name: '',
      },
      loading: false,
      /*是否上传图片*/
      isupload: false,
    };
  },
  created() {
    if (this.$route.query.id != 0 && this.$route.query.id != undefined) {
      console.log(111)
      this.form.id = this.$route.query.id;
      this.getParams()
    }
  },

  methods: {
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      DeliveryApi.edit({
        id: self.form.id
      }, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.form = formatModel(self.form, data.data.model);
        })
        .catch(error => {

        });

    },
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          if (this.form.id == '') {
            DeliveryApi.create(form, true)
              .then(data => {
                self.$message({
                  message: '操作成功',
                  type: 'success'
                });
                self.$router.push('/user/delivery/index');
              })
              .catch(error => {
                self.loading = false;
              });
          } else {
            DeliveryApi.update(form, true)
              .then(data => {
                self.$message({
                  message: '操作成功',
                  type: 'success'
                });
                self.$router.push('/user/delivery/index');
              })
              .catch(error => {
                self.loading = false;
              });
          }

        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'avatarUrl') {
          this.form.avatarUrl = e[0].file_path;
        }
      }
      this.isupload = false;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}
</style>
